<script setup lang="ts">
import { onMounted, reactive } from "vue";

defineOptions({
  name: "DynamicSortingBarChart"
});

const data = reactive([]);
for (let i = 0; i < 5; ++i) {
  data.push(Math.round(Math.random() * 200));
}
//动态排序柱状图
const DynamicSortingBarChartData = {
  xAxis: {
    max: "dataMax"
  },
  yAxis: {
    type: "category",
    data: ["广州", "深圳", "佛山", "东莞", "北京"],
    inverse: true,
    animationDuration: 300,
    animationDurationUpdate: 300,
    max: 4 // only the largest 3 bars will be displayed
  },
  legend: {
    show: false
  },
  series: [
    {
      realtimeSort: true,
      name: "X",
      type: "bar",
      data: data,
      label: {
        show: true,
        position: "inside",
        valueAnimation: true
      }
    }
  ],
  animationDuration: 0,
  animationDurationUpdate: 3000,
  animationEasing: "linear",
  animationEasingUpdate: "linear"
};

const run = () => {
  for (var i = 0; i < data.length; ++i) {
    if (Math.random() > 0.9) {
      data[i] += Math.round(Math.random() * 2000);
    } else {
      data[i] += Math.round(Math.random() * 200);
    }
  }
};

onMounted(() => {
  setTimeout(() => {
    run();
  }, 0);
  setInterval(() => {
    run();
  }, 3000);
});
</script>

<template>
  <div class="dynamic-sorting-bar-chart">
    <div class="dynamic-sorting-bar-chart__title">
      <span>曝光量城市排序</span>
    </div>
    <ReChart :data="DynamicSortingBarChartData" height="100%" width="100%" />
  </div>
</template>

<style lang="scss" scoped>
.dynamic-sorting-bar-chart {
  box-sizing: border-box;
  width: 100%;
  height: 100%;

  .dynamic-sorting-bar-chart__title {
    position: absolute;
    top: -15px;
    left: 20%;
    width: 60%;
    height: 35px;
    font-size: 16px;
    font-weight: bold;
    line-height: 35px;
    color: #fff;
    text-align: center;
    background-color: #2e6099;
    border-radius: 18px;
  }
}
</style>
